<!-- 设备监测抄录 -->
<template>
	<view class="page">
		<view class="sbbh" v-if="!showSelect">
			<view class="sbbh-l"> 选择设备 </view>
			<view class="sbbh-r">
				<view class="inp" @tap="showSelctFn()">请点击监测选择</view>
				        <view class="scan" @click="scanCode()">
				          <u-icon name="scan" color="#44D94B" size="36"></u-icon>
				          <text>扫一扫</text>
				        </view>
			</view>
		</view>

		<template v-if="nyTransInfo">
			<view class="xb-info">
				<view>
					<text class="c-tit">基本信息</text>
				</view>
        <view>
          <text>名称</text>
          <text>{{ nyTransInfo.name }}</text>
        </view>
				<view>
					<text>位置</text>
					<text>{{ nyTransInfo.installPosition }}</text>
				</view>
				<view>
					<text>编号</text>
					<text>{{ nyTransInfo.num }}</text>
				</view>
				<view>
					<text>容量（kv）</text>
					<text>{{ nyTransInfo.approvalLoad }}</text>
				</view>
        <view>
          <text>总负荷（kv）</text>
          <input type="number" v-model="nyTransInfo.curLoad"></input>
        </view>
	<!-- 			<view>
					<text>总负荷（kv）</text>
					<input type="text" v-model="curLoad" placeholder="请输入总负荷" />
				</view> -->

				<!--				<view>-->
				<!--					<text>抄录日期</text>-->
				<!--					<input type="text" placeholder="请输入抄录日期">-->
				<!--				</view>-->
			</view>

			<!--<view class="xb-info">-->
			<!--	<view class="">-->
			<!--		<text>空开抄录</text>-->
			<!--		<view class="btn_box">-->
			<!--			<button @click="piChao()">批量抄录</button>-->
			<!--			<button @click="danChao()">单个抄录</button>-->
			<!--		</view>-->
			<!--	</view>-->
			<!--</view>-->

      <view class="qykk" v-for="(item,index) in tranEnterList" :key="index" v-if="!isEmpty(tranEnterList)">
        <view class="qykk-t">{{ item.enName }}</view>
        <view class="qykk-col">
          <view class="qykk-col-t">
            <text>空开编号</text>
            <text>空开线径</text>
            <text>负荷监测</text>
          </view>
          <view class="qykk-col-c-box">
            <view class="qykk-col-c" v-for="(item2,index2) in item.childs" :key="index2">
              <text>{{ item2.airName||'-'}}</text>
              <text>{{ item2.diameter }}</text>
              <input placeholder="请填写" v-model="item2.curValue" type="number"/>
            </view>
          </view>
        </view>
      </view>



 		<view class="xb-bottom-btn" v-if="nyTransInfo" @click="submitFn">
				提交
			</view>
		</template>


		<!-- 选择设备编号s -->
		<view class="bh-select" v-show="showSelect">
				<view class="search-box" v-show="showSelect">
					<view class="search">
						<u-icon name="search" color="#999999"></u-icon>
						<input type="text" :value="searchVal" placeholder="搜索" @input="searchFn" />
					</view>
					<text @click="closeSelctFn()">取消</text>
				</view>

			<mescroll-body :top="110" class="select_scroll" ref="mescrollRef" @init="mescrollInit"
				:down="downOption" @down="downCallback" @up="upCallback">
				<view class="bslist-col xb-card" v-for="(item, index) in dataList" :key="index"
					@click="itemClick(item)">
					<!-- 	<view class="bslist-col-t">
						<text>{{item.reporter}} | {{item.repairType}}</text>
						<text :style="{color: type[item.state].color}">{{type[item.state].state}}</text>
					</view> -->
					<view class="bslist-col-c">
						<text>编号：{{ item.num }}</text>
						<!-- <text>容量1000kw</text> -->
					</view>
					<view class="bslist-col-b">
						<text>容量：{{ item.approvalLoad }}kw</text>
						<text>负荷{{ item.curLoad }}kv</text>
					</view>
					<u-icon name="arrow-right" class="icon"></u-icon>
				</view>
			</mescroll-body>
		</view>
		<!-- 选择设备编号e -->
		<postSuccess v-if="showSuccess">
			<view slot="txt" class="suc-btnbox">
				<!-- 	<view @click="navToDetails">查看提交信息</view>
			<view @click="chaoAway">继续抄表</view> -->
        <view @click="chaoAway">继续抄表</view>
			</view>
		</postSuccess>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				curLoad: "",
				nyTransInfo: null,
				showSelect: false,
				searchVal: "",
				navBarHeight: 0,
				showSuccess: false,
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
				queryParams: {
					transId: '',
					enName: '',
          transNum:''
				},
				categorOption: [],
				dataList: [],
        tranEnterList:null
			};
		},
    watch:{
      tranEnterList:{
        handler(newVal,oldVal){
          let num=0
          for (let item in newVal){
            if (newVal[item].childs.length>0){
              newVal[item].childs.forEach(chid=>{
                if (chid.curValue===''){
                  num+=0
                }else {
                  num+=parseFloat(chid.curValue)
                }
              })
            }
          }
          this.nyTransInfo.curLoad=num
        },
        deep:true
      }
    },
		onLoad() {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			this.navBarHeight = this.getStatusBarHeight();
			// #endif
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(page) {
				//联网加载数据
				this.apis.energyApi
					.nyTransCheckList({
						pageNum: page.num,
						pageSize: page.size
					})
					.then((res) => {
						this.dataList = res.rows;
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
						this.mescroll.endErr();
					});
			},
			itemClick(item) {
        this.tranEnterList=null
        this.queryParams.transNum=item.num
        this.getTransInfoByNum()
        this.showSelect=false
			},
      getTransInfoByNum(){
        this.apis.energyApi
            .nyTransCheckList({
              num:this.queryParams.transNum
            })
            .then((res) => {
              let trans =  res.rows[0];
              if (this.isEmpty(res.rows)){
                uni.showToast({
                  icon:'none',
                  title:'当前码错误或未录入该箱变',
                  duration: 3000
                })
                return false
              }
              this.nyTransInfo = trans;
              this.nyTransInfo.curLoad=0
              this.apis.energyApi.nyTransAllow({
                transNum:this.queryParams.transNum
              }).then(res2=>{
								if(res2.code==200&&res2.rows&&res2.rows.length>0){
									let ensObj={}
									for (let  item of  res2.rows){
                    item.curValue=''
									  if (ensObj[item.enName]==null){
									    ensObj[item.enName]={
									      enName:item.enName,
									      childs:[item]
									    }
									  }else (
									      ensObj[item.enName].childs.push(item)
									  )
									}
									this.tranEnterList=ensObj
									this.dataList = [];
								}else{
									uni.showToast({
										icon:'none',
										title:'出现错误，请联系管理员',
										duration: 3000
									})
								}

              })
            })
            .catch(() => {
              //联网失败的回调,隐藏下拉刷新的状态
              this.mescroll.endErr();
            });


      },
			upCallback(page) {
				this.apis.energyApi
					.nyTransCheckList({
						pageNum: page.num,
						pageSize: page.size,
            num:this.searchVal
					})
					.then((res) => {
						this.dataList = this.dataList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					});
			},
			// 批量抄录
			piChao(){

			},
			// 单独抄录
			danChao(){

			},
			itemCheck(item) {
				this.meterInfor = item;
				this.addForm.lastValue = item.currentValue;
				this.addForm.meterNum = item.meterNum;
				this.addForm.meterType = item.meterType;
				this.addForm.category = item.category;
				this.addForm.meterId = item.id;
				this.dataList = [];
				this.showSelect = false;
			},
			showSelctFn() {
				this.nyTransInfo = null;
				this.dataList = [];
				this.showSelect = true;
				this.mescroll.resetUpScroll();
			},
			submitFn() {
				// this.addForm.currentCheckDate= this.$u.timeFormat(Date.parse(new Date()), 'yyyy-mm-dd hh:MM:ss');
        let listForm=[]
        //this.tranEnterList.forEach(item=>{
        //  listForm.concat(item.childs)
        //})
        for (let key in this.tranEnterList){
          listForm= listForm.concat(this.tranEnterList[key].childs)
        }
				this.apis.energyApi.nyTransAllowCheckAll({
          transId:this.nyTransInfo.id,
          curLoad:this.nyTransInfo.curLoad,
          curList:listForm
        }).then((res) => {
					if (res.code == 200) {
						this.showSuccess = true;
					}
				});
			},
			closeSelctFn() {
				this.dataList = [];
				this.showSelect = false;
			},
			searchFn(e) {
				this.dataList = [];
				this.searchVal = e.detail.value;
				clearTimeout(this.searchTimout);
				this.searchTimout = setTimeout(() => {
          this.mescroll.resetUpScroll();
				}, 1000);
			},
      //继续抄表
      chaoAway() {
        this.nyTransInfo=null
        this.showSuccess = false;
      },
      scanCode() {
        uni.scanCode({
          success: (res) => {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
            this.queryParams.transNum=res.result
            this.getTransInfoByNum()
          },
        });
      },
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 112rpx;
	}

	.bslist-col {
		position: relative;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
		margin-bottom: 20rpx;
		padding: 26rpx 64rpx 26rpx 32rpx;

		.icon {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-60%);
		}

		view {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;

			text:nth-child(2) {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
			}

			&:nth-child(1) {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			&:nth-child(3) {
				margin-top: 10rpx;
			}
		}
	}

	.c-tit {
		font-size: 28upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.jctit {
		box-sizing: border-box;
		margin: 0 32upx;
		font-size: 26upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
		margin-bottom: 28rpx;

		.ts {
			padding-bottom: 30rpx;
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
		}
	}

	.sbbh {
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 30rpx 32rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sbbh-l {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #666666;
		}

		.sbbh-r {
			display: flex;

			.inp {
				position: relative;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				//&::after {
				//  content: "";
				//  position: absolute;
				//  top: 0;
				//  right: 0;
				//  height: 100%;
				//  width: 1rpx;
				//  background: #EEEEEE;
				//}
			}

			.scan {
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #44d94b;

				u-icon {
					display: flex;
					align-items: center;
				}

				text {
					margin-left: 12rpx;
				}
			}
		}
	}

  .search-box {
    position: fixed;
    box-sizing: border-box;
    padding: 20rpx;
    top: 0;
    /* #ifdef H5 */
    top: 88rpx;
    /* #endif */
    z-index: 999;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .search {
      border-radius: 12rpx;
      flex-grow: 1;
      height: 70rpx;
      display: flex;
      padding: 0 20rpx;
      align-items: center;
      background: #f5f5f5;
    }

    text {
      display: inline-flex;
      font-size: 24rpx;
      margin-left: 16rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }


	.bslist-col {
		background-color: #fff;
	}

	.btn_box{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		border: none;
		box-shadow: none;
		&:after{
			display: none;
		}
		button{
			background: #44D94B;
			border-radius: 6rpx;
			font-size: 14px;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 10rpx;
			padding: 12rpx 24rpx;
			border: none !important;
			line-height: normal;
			&:after{
				display: none;
			}
		}
	}

	.qykk{
    width: 100%;
    background: #FFFFFF;
    border-radius: 12rpx;
    .qykk-t{
      padding: 30rpx 32rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .qykk-col-t{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      padding: 30rpx 32rpx;
      background: #FAFAFA;
      text:nth-child(2){
        justify-self: center;
      }
      text:nth-child(3){
        justify-self: right;
      }
    }

    .qykk-col-c-box{
      padding: 30rpx 32rpx;
      margin-bottom: 30rpx;
      .qykk-col-c{
        padding: 28rpx 0rpx;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        position: relative;
        &:first-child{
          padding-top: 0;
        }
        text:nth-child(2){
          justify-self: center;
        }
        text:nth-child(3){
          justify-self: right;
        }

        input{
          font-size: 26rpx;
          text-align: right;
        }

        /deep/ .input-placeholder{
          color: #F74D39;
        }

        &:after{
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 1rpx;
          background: #EEEEEE;
        }
        &:last-child{
          padding-bottom: 0;
          &:after{
            content: "";
            display: none;
          }
        }
      }
    }
	}
</style>
